<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>分类</title>
    <link type="text/css" rel="stylesheet" href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}">
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
          th:href="@{https://unpkg.com/element-ui/lib/theme-chalk/index.css}">
    <link type="text/css" rel="stylesheet" href="../static/css/blogs.css" th:href="@{/css/blogs.css}">
    <link type="text/css" rel="stylesheet" href="../static/css/attention.css" th:href="@{/css/attention.css}">
    <link rel="stylesheet" th:href="@{https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css}">
    <style type="text/css">
        .att{
            width: 100%;
            text-align: center;
        }

        .attached{
            width: 100% !important;
        }
    </style>
    <script type="text/javascript" src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js}"></script>
    <script type="text/javascript" src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
    <script type="text/javascript" src="../static/js/blogs.js" th:src="@{/js/blogs.js}"></script>
    <link type="text/css" rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">
</head>
<body>
<!-- 导航-->
<nav class="navbar navbar-default" role="navigation">
    <div class="container navigation-nav">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a th:href="@{/index}" id="logo" class="navbar-brand dd">流沙</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav navbar-left">
                <li><a th:href="@{/index}" class="m-l-20"><i class="el-icon-reading"></i>&nbsp;<span
                        class="hidden-md hidden-sm">博文</span></a></li>
                <li><a th:href="@{/type}" class="m-l-20"><i class="el-icon-user"></i>&nbsp;<span
                        class="hidden-md hidden-sm">分类</span></a></li>
                <li><a th:href="@{/news}" class="m-l-20"><i class="el-icon-bell"></i>&nbsp;<span
                        class="hidden-md hidden-sm">消息</span></a></li>
            </ul>
            <form class="nav navbar-nav navbar-form search" method="post" role="search" action="#"
                  th:action="@{/search}"
                  target="_blank">
                <div class="form-group input-group">
                    <input type="text" name="query" class="form-control" placeholder="搜索"
                           th:value="${query}">
                </div>

            </form>
            <ul class="nav navbar-nav navbar-right">
                <!--<li>-->
                <a th:href="@{/login}" type="button" class="btn btn-link btn-lg btn-login"
                   th:style="${session.user}!=null ? 'display:none':'display:inline-block'">登录</a>
                <!--</li>-->
                <!--<li>-->
                <a th:href="@{/registered}" type="button" class="btn btn-danger btn-lg btn-register"
                   th:style="${session.user}!=null ? 'display:none':'display:inline-block'">注册</a>
                <!--</li>-->

                <li class="dropdown" th:style="${session.user}==null ? 'display:none':'display:inline-block'" id="drop">
                    <a href="#" class="dropdown-toggle bg clear" data-toggle="dropdown">
                        <img th:src="@{/images/timg.jpg}" class="img-circle" alt=""
                             style="width: 40px;height: 40px;">
                        <!--<span class="nickname" th:text="${session.user.nickname}"></span>-->
                        <i class="glyphicon glyphicon-triangle-right"></i>
                    </a>
                    <ul class="dropdown-menu animate__animated animate__fadeInRight">
                        <li style="height: 40px!important;">
                            <a th:href="@{/homepage}"><i class="glyphicon glyphicon-user"></i>&nbsp;&nbsp;&nbsp;个人主页</a>
                        </li>
                        <li style="height: 40px!important;">
                            <a th:href="@{/logout}"><i class="glyphicon glyphicon-log-out"></i>&nbsp;&nbsp;&nbsp;退出</a>
                        </li>
                    </ul>
                </li>
                <!--<li>-->
                <a th:href="@{/post}" type="button" class="btn btn-info btn-lg btn-edit" th:style="${session.user}==null ? 'display:none':'display:inline-block'"><i
                        class="el-icon-edit"></i>写文章</a>
                <!--</li>-->
            </ul>
        </div>
    </div>
</nav>

<!--中间内容-->
<div class="att">
    <div class="ui attached segment">
        <div class="ui labeled button" th:each="type:${types}">
            <a href="#" class="ui basic orange button" th:text="${type.name}" th:href="@{/type/{id}(id=${type.id})}"></a>
            <!--th:href="@{/type/{id}(id=${type.id})}"-->
            <!--th:classappend="${style.id=activeTypeId} ? 'orange'"-->
            <div class="ui basic orange left pointing label" th:text="${#arrays.length(type.blogs)}"></div>
        </div>
    </div>
</div>



<div class="middle container">
    <div class="row">
        <!--博客内容-->
        <div class="blog-content col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <!--文章列表模块-->
            <ul class="list-group">
                <li class="list-group-item" th:href="@{/blog/{blogId}(blogId=${blog.blogId})}"
                    th:each="blog : ${page.content}">
                    <!--图片-->
                    <!--th:href="@{/blog/{blogId}(blogId=${blog.blogId})}"-->
                    <a href="#" class="right hidden-xs hidden-sm hidden-md" target="_blank"
                       th:href="@{/blog/{blogId}(blogId=${blog.blogId})}">
                        <img th:src="@{${blog.firstpicture}}" alt="">
                    </a>
                    <!--内容-->
                    <div class="content">
                        <!--标题-->
                        <!--th:href="@{/blog/{blogId}(blogId=${blog.blogId})}"-->
                        <h4><a href="#" target="_blank" th:href="@{/blog/{blogId}(blogId=${blog.blogId})}"
                               th:text="${blog.title}"></a></h4>
                        <!--内容-->
                        <p th:text="${blog.description}"></p>
                        <!--www-->
                        <div class="meta">
                            <!--昵称-->
                            <!--<a href="#">-->
                            <!--<img th:src="@{/images/timg.jpg}" style="width: 30px;height: 30px;" class="img-circle"-->
                            <!--alt="头像">-->
                            <!--&lt;!&ndash;th:src="@{${blog.user.avatar}}"&ndash;&gt;-->
                            <!--&lt;!&ndash;&nbsp;<span>一世长安一世欢</span>&ndash;&gt;-->
                            <!--&lt;!&ndash;th:text="${blog.user.nickname}"&ndash;&gt;-->
                            <!--</a>-->
                            <!--评论-->
                            <a href="#"><i class="el-icon-chat-dot-round"></i>&nbsp;1</a>
                            <!--喜欢-->
                            <a href="#"><i class="glyphicon glyphicon-heart-empty"></i>&nbsp;1</a>
                            <!--收藏-->
                            <a href="#"><i class="el-icon-star-off"></i>&nbsp;1</a>
                            <!--更新时间-->
                            <a href="#">
                                <i class="el-icon-date"></i>&nbsp;
                                <span th:text="${#dates.format(blog.updatetime,'yyyy-MM-dd')}"></span>
                            </a>
                            <!--浏览次数-->
                            <a href="#">
                                <i class="el-icon-ice-cream"></i>&nbsp;
                                <span th:text="${blog.views}"></span>
                            </a>

                            <a href="#">
                                <i class="el-icon-grape"></i>&nbsp;
                                <span th:text="${blog.type.name}"></span>&nbsp;
                                <i class="el-icon-grape"></i>
                            </a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!--分页-->
    <!--<div class="row" th:fragment="pager">-->
        <!--<nav>-->
            <!--<ul class="pagination">-->
                <!--<li class="page-item" th:each="p : ${#numbers.sequence(1,pages.totalPages)}">-->
                    <!--<a href="javascript:void(0)" th:page="${p-1}" class="page-link pagelink" th:text="${p}"></a>-->
                <!--</li>-->
            <!--</ul>-->
        <!--</nav>-->
        <!--<script type="text/javascript">-->
            <!--$(function () {-->
                <!--$('.pagelink').click(function () {-->
                    <!--let f = $("#form1");-->
                    <!--let p = $("<input type='hidden' name='page'>");-->
                    <!--$(p).val($(this).attr("page"));-->
                    <!--// let s=$("<input type='hidden' name='size' value='1'>");-->
                    <!--// $(s).appendTo(f);-->
                    <!--$(p).appendTo(f);-->
                    <!--$(f).submit();-->
                    <!--return false;-->
                <!--});-->
            <!--});-->
        <!--</script>-->
    <!--</div>-->
</div>


<!--<div th:if="${page.totalPages}>1">-->
<!--<a th:onclick="page(this)" th:attr="data-page=${page.number}-1" th:unless="${page.first}"-->
<!--class="btn btn-default">上一页</a>-->
<!--<a th:onclick="page(this)" th:attr="data-page=${page.number}+1" th:unless="${page.last}"-->
<!--class="btn btn-default">下一页</a>-->
<!--</div>-->


<div style="width: 100%;height: 100px;"></div>

<!--底部footer-->
<footer class="footer container hidden-xs">
    <div class="row">
        <div class="foot main">
            <a href="#" target="_blank">关于流沙</a>
            <a href="#" target="_blank">联系我们</a>
            <a href="#" target="_blank">加入流沙</a>
            <a href="#" target="_blank">流沙出版</a>
        </div>
        <div class="icp">
            © 2020.10.10 一世长安一世欢 流沙
        </div>
    </div>
</footer>

<!--<script type="text/javascript" src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>-->
<!--<script type="text/javascript" th:src="@{https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js}"></script>-->
<!--<script type="text/javascript" src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>-->
<!--<script type="text/javascript" src="../static/js/blogs.js" th:src="@{/js/blogs.js}"></script>-->
<script type="text/javascript" src="https://unpkg.com/element-ui/lib/index.js"
        th:src="@{https://unpkg.com/element-ui/lib/index.js}"></script>
</body>
</html>
